<template>
  <u-header>
    <template #nav>
      <global-nav curr="game" />
    </template>
  </u-header>
  <div class="main">
    <div class="text-3xl intro">
      <div class="wrapper3">
        <p
          class="wow animate__fadeIn"
          data-wow-delay="1s"
          data-wow-duration="2s"
        >
          《美人传》是一款集宫斗、换装、养成等多重玩法于一体的古装宫廷恋爱手游。
          唯美古风恋爱换装还原大唐盛世之景，体验一场风花雪月的宫廷蜜恋。
          画风精致唯美，剧情跌宕起伏，多重精致古典妆容，百套绫罗华服任你挑选，
          再现你心中的大唐盛世！
        </p>
      </div>
    </div>
    <div class="wrapper3">
      <div class="section">
        <div class="title1"></div>
        <div class="con">
          <keep-alive>
            <CircleSwipe />
          </keep-alive>
        </div>
      </div>
      <div class="section section2">
        <div class="title2"></div>
        <div class="relative con">
          <school-swipe></school-swipe>
          <div class="absolute cat"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import UHeader from './UHeader.vue'
import SchoolSwipe from './SchoolSwipe.vue'
import CircleSwipe from './CircleSwipe2.vue'
// import CircleSlide from './CircleSlide.vue'
import GlobalNav from '@/components/GlobalNav.vue'

import WOW from 'wow.js'
import 'animate.css'
import 'animate.css/animate.compat.css'

onMounted(async () => {
  const wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true,
    scrollContainer: null,
    resetAnimation: true
  })
  wow.init()
})
</script>

<style lang="scss" scoped>
.main {
  height: 2458px;
  background: #f6fbff no-repeat center bottom url(../assets/bg_main.jpg);
  overflow: hidden;
}
.intro {
  margin: 68px 0 0 106px;
  color: #4351a0;
  height: 546px;
  line-height: 2;
  background: url(../assets/bg_intro.png) no-repeat center center;
  p {
    font-weight: bold;
    padding: 100px 100px 0 116px;
    -webkit-text-stroke: 0.4px white;
    background-clip: text;
    -webkit-background-clip: text;
  }
}
.section {
  .title1 {
    margin-top: -60px;
    margin-bottom: 40px;
    height: 187px;
    background: url(../assets/title_1.png) no-repeat center center;
  }
  .title2 {
    margin-top: 20px;
    height: 193px;
    background: url(../assets/title_2.png) no-repeat center center;
  }
  &.section2 {
    .con {
      height: 750px;
      padding-top: 80px;
      background: url(../assets/bg_view.png) no-repeat center center;
    }
  }
}
.cat {
  width: 261px;
  height: 143px;
  left: 25px;
  bottom: 126px;
  z-index: 9;
  background: url(../assets/cat.png) no-repeat center center;
}
</style>
